//定义整体高度 这块设置最大内容div的实时响应高度必须往上放 explore专属
window.addEventListener('resize', setexpHeight);
window.addEventListener('load', setexpHeight);

function setexpHeight() {
    const element = document.querySelector('.row.justify-content-center.explore_content');
    if (element) {
        element.style.height = `${window.innerHeight-100}px`;
    }
}


// 点击播放按钮时加载并播放视频
document.getElementById('startVideoImg').addEventListener('click', function() {
    var video = document.getElementById('noteVideo');
    var source = video.querySelector('source');

    source.src = source.getAttribute('data-src');
    video.load(); // 加载视频
    video.play(); // 播放视频
    this.style.display = 'none'; // 隐藏播放按钮

    video.setAttribute('controls', 'controls');
});
// 定义右边内容块高度
function setExploreHeight() {
    // 获取 explore_content 元素
    var contentElement = document.querySelector('.explore_content');

    // 获取 explore_height_fixed 元素
    var fixedElement = document.querySelector('.explore_height_fixed');

    if (contentElement && fixedElement) {
        // 动态计算 explore_content 的高度
        var contentHeight = contentElement.offsetHeight;

        // 设置 explore_height_fixed 的高度
        fixedElement.style.height = contentHeight - 130 + 'px';
    }
}

// 在页面加载时设置高度
window.onload = setExploreHeight;

// 在窗口大小调整时重新设置高度
window.onresize = setExploreHeight;


//轮播图
var carouselElement = document.getElementById('carouselExampleControls');
var carousel = new bootstrap.Carousel(carouselElement);
var totalSlides = document.querySelectorAll('#carouselExampleControls .carousel-item').length;
var currentSlideElem = document.getElementById('current-slide');
var totalSlidesElem = document.getElementById('total-slides');

totalSlidesElem.textContent = totalSlides;

carouselElement.addEventListener('slid.bs.carousel', function(event) {
    var currentIndex = event.to + 1; // Carousel index is zero-based, so add 1
    currentSlideElem.textContent = currentIndex;
});

//输入小框js
const inputField = document.querySelector('.comments_input');
const sendBtn = document.querySelector('.sendBtn');
const cancelBtn = document.querySelector('.cancelBtn');
const expBtns = document.querySelectorAll('.exp_btn');

const chatBtn = document.querySelector('.exp_btn img[src="static/img/exp-chat.svg"]').parentElement; // 选择聊天按钮

// 选择点赞按钮的父级 exp_btn，支持不同的图片源
const likeBtnParent = [...document.querySelectorAll('.exp_btn img')]
    .find(img => img.src.includes('exp-like')); // 检查 src 是否包含 'exp-like'

// 选择星标按钮的父级 exp_btn，支持不同的图片源
const starBtnParent = [...document.querySelectorAll('.exp_btn img')]
    .find(img => img.src.includes('exp-star')); // 检查 src 是否包含 'exp-star'

// 确保选择到包含数字的 span 元素
const likeCounter = likeBtnParent.parentElement.querySelector('span'); // 获取包含点赞数字的 span
const starCounter = starBtnParent.parentElement.querySelector('span'); // 获取包含星标数字的 span


// 通用函数：显示发送和取消按钮，隐藏所有exp_btn
function showButtons() {
    sendBtn.style.display = 'inline-block';
    cancelBtn.style.display = 'inline-block';
    expBtns.forEach(function(btn) {
        btn.style.display = 'none';
    });
}

// 当input聚焦时
inputField.addEventListener('focus', showButtons);

// 当点击聊天按钮时
chatBtn.addEventListener('click', showButtons);

// 当点击取消按钮时
cancelBtn.addEventListener('click', function() {
    sendBtn.style.display = 'none';
    cancelBtn.style.display = 'none';
    expBtns.forEach(function(btn) {
        btn.style.display = 'inline-block';
    });
});



// 通用 AJAX 请求处理函数
function handleAction(button, counter, apiType, actionType) {
    const img = button; // 获取图像
    let count = parseInt(counter.textContent.trim(), 10);
    var iswan = 0;
    if (counter.textContent.includes('万')) {
        iswan = 1;
    }

    // 发送 AJAX 请求
    $.ajax({
        url: `/api/action.php?type=like`, // 替换为实际 API 地址
        type: 'POST',
        data: {
            uid: uid,
            nid: nid,
            type: actionType
        },
        success: function(response) {
            if (response.status==200||response.status==210) {
                // 切换图片和更新计数
                if (actionType === 0) { // 点赞
                    img.src = img.src.includes('success.svg')
                        ? img.src.replace('-success.svg', '.svg') // 切换回原始图片
                        : img.src.replace('.svg', '-success.svg'); // 切换到成功状态图片
                    count += img.src.includes('success.svg') ? 1 : -1; // 更新计数
                } else if (actionType === 1) { // 星标
                    img.src = img.src.includes('success.svg')
                        ? img.src.replace('-success.svg', '.svg') // 切换回原始图片
                        : img.src.replace('.svg', '-success.svg'); // 切换到成功状态图片
                    count += img.src.includes('success.svg') ? 1 : -1; // 更新计数
                }

                // 确保计数不小于零
                count = Math.max(count, 0);
                if(iswan==0){
                    //counter.textContent = count;
                    counter.textContent = formatNumberToWan(count);
                }
                if (response.status==200){
                    Qmsg.success(response.message)
                }else{
                    Qmsg.info(response.message)
                }
                //console.log(response.message);
            } else {
                console.error('请求失败:', response.status);
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX 请求失败:', error);
        }
    });
}

// 点赞按钮点击事件处理
likeBtnParent.parentElement.addEventListener('click', function() {
    handleAction(likeBtnParent, likeCounter, 'like', 0); // 调用通用处理函数，type 为 0
});

// 星标按钮点击事件处理
starBtnParent.parentElement.addEventListener('click', function() {
    handleAction(starBtnParent, starCounter, 'star', 1); // 调用通用处理函数，type 为 1
});


// 选择分享按钮
const shareBtnParent = document.querySelector('.exp_btn img[src="static/img/exp-share.svg"]').parentElement;



//悬停二维码定位
const twoExpBtn = document.querySelector('.two_exp_btn');
const sharePopContainer = document.querySelector('.share-pop-container');

if (twoExpBtn && sharePopContainer) {
    twoExpBtn.addEventListener('mouseover', function() {
        const rect = twoExpBtn.getBoundingClientRect();

        // 计算 .share-pop-container 的位置
        sharePopContainer.style.position = 'fixed';
        sharePopContainer.style.bottom = `${window.innerHeight - rect.top - rect.height + 30}px`; // 增加上面间距
        sharePopContainer.style.left =
            `${rect.left + rect.width / 2 - sharePopContainer.offsetWidth / 2 + 35}px`; // 增加左边间距
        sharePopContainer.style.visibility = 'visible';
        sharePopContainer.style.opacity = '1';
    });

    twoExpBtn.addEventListener('mouseout', function() {
        sharePopContainer.style.visibility = 'hidden';
        sharePopContainer.style.opacity = '0';
    });
}


const exploreHead = document.querySelector('.explore_head');
const fixedElement = document.querySelector('.explore_height_fixed');

if (exploreHead && fixedElement) {
    fixedElement.addEventListener('scroll', function() {
        // 检查是否滚动
        if (fixedElement.scrollTop > 0) {
            exploreHead.classList.add('fixed');
        } else {
            exploreHead.classList.remove('fixed');
        }
    });
}


// 获取模态框
var modal = document.getElementById("imageModal");

// 获取模态框中的图片元素
var modalImg = document.getElementById("imgZoom");

// 获取所有可放大的图片
var images = document.querySelectorAll(".zoomable");

// 获取关闭按钮
var closeBtn = document.querySelector(".close");

// 获取轮播图的控制按钮和指示器
var prevBtn = document.querySelector(".carousel-control-prev");
var nextBtn = document.querySelector(".carousel-control-next");
var currentSlideSpan = document.getElementById("current-slide-model");

// 当前显示的图片索引
var currentIndexs = 0;

// 更新指示器
function updateSlideIndicator() {
    currentSlideSpan.textContent = (currentIndexs + 1);
}

// 为每个图片添加点击事件，用于放大显示
images.forEach(function(image, index) {
    image.onclick = function() {
        currentIndexs = index; // 更新当前索引
        modal.style.display = "flex"; // 显示模态框
        modalImg.src = this.src; // 将点击的图片路径赋给模态框中的图片
        updateSlideIndicator(); // 更新指示器
        // 确保图片放大效果被应用
        modalImg.classList.add('zoom-in');
    }
});

// 点击关闭按钮时，关闭模态框
closeBtn.onclick = function() {
    modal.style.display = "none"; // 隐藏模态框
}

// 点击模态框背景（包括图片）时都关闭模态框
modal.onclick = function(event) {
    // 只要点击的目标是模态框本身（背景），就关闭模态框
    if (event.target === modal || event.target === modalImg) {
        modal.style.display = "none"; // 隐藏模态框
    }
}

// 处理翻页按钮的点击事件
prevBtn.onclick = function() {
    currentIndexs = (currentIndexs - 1 + images.length) % images.length; // 上一张
    modalImg.src = images[currentIndexs].src;
    updateSlideIndicator(); // 更新指示器
    // 确保图片放大效果被应用
    modalImg.classList.add('zoom-in');
}

nextBtn.onclick = function() {
    currentIndexs = (currentIndexs + 1) % images.length; // 下一张
    modalImg.src = images[currentIndexs].src;
    updateSlideIndicator(); // 更新指示器
    // 确保图片放大效果被应用
    modalImg.classList.add('zoom-in');
}

const videoContainer = document.querySelector('.exp_left_content');
const video = document.querySelector('.note_video');

// 当视频开始播放时，添加鼠标进入和离开的事件监听器
video.addEventListener('play', () => {
    // 鼠标进入显示控件
    videoContainer.addEventListener('mouseenter', () => {
        video.setAttribute('controls', 'controls');
    });

    // 鼠标离开隐藏控件
    videoContainer.addEventListener('mouseleave', () => {
        video.removeAttribute('controls');
    });
});

//video中心图像
/*document.getElementById('startVideoImg').addEventListener('click', function() {
    // 隐藏图像
    this.style.display = 'none';

    // 显示并播放视频
    var video = document.getElementById('noteVideo');
    video.style.display = 'block';
    video.play();
    video.setAttribute('controls', 'controls');
});*/
// 阻止视频点击时事件冒泡
video.addEventListener('click', function(event) {
    if (video.currentTime < 0) {
        event.preventDefault();
        event.stopPropagation();
    }
});


// 选择 toast 元素
const toast = document.getElementById('toast');
// 点击分享按钮时显示 toast
shareBtnParent.addEventListener('click', function() {
    // 创建一个临时输入元素
    const tempInput = document.createElement('input');
    tempInput.value = window.location.href;

    // 设置输入框样式以隐藏它
    tempInput.style.position = 'absolute';
    tempInput.style.opacity = '0';
    tempInput.style.pointerEvents = 'none'; // 防止用户交互

    document.body.appendChild(tempInput);

    tempInput.select();
    tempInput.setSelectionRange(0, 99999);

    document.execCommand('copy');

    document.body.removeChild(tempInput);

    toast.classList.add('show');

    setTimeout(function() {
        toast.classList.remove('show');
    }, 3000);

    console.log('当前网址已复制: ' + window.location.href);
});


//ajax fans
$('#followButton').click(function() {
    var $this = $(this); // 保存当前按钮对象
    var fans_id = $(this).data('fans-id'); // 获取粉丝ID
    var uid = $(this).data('uid'); // 获取用户ID

    $.ajax({
        url: '/api/action.php?type=fans', // 替换为你的 API 处理文件路径
        method: 'POST', // 使用 POST 方法
        data: {
            fans_id: fans_id,
            uid: uid
        },
        dataType: 'json',
        success: function(response) {
            // 处理响应
            if (response.status === '200') {
                Qmsg.success(response.message);
                $this.addClass('follows_btn');
                $this.text('已关注'); // 更新按钮文本
            } else {
                Qmsg.info(response.message);
                $this.removeClass('follows_btn'); // 移除已关注的类
                $this.text('关注'); // 更新按钮文本
                //alert('操作失败: ' + response.message);
            }
        },
        error: function(xhr, status, error) {
            // 处理错误
            Qmsg.error(error);
            //alert('请求失败: ' + error);
        }
    });
});

//发送comments
$(".sendBtn").on("click", function() {
    // 获取输入框中的评论内容
    var comment = $(".comments_input").val();
    // 检查评论内容是否为空
    if (comment === '') {
        Qmsg.info("发送内容不能为空!");
        return;
    }
    // 发送 AJAX 请求
    $.ajax({
        url: '/api/comments.php?type=send',
        type: 'POST',
        data: {
            uid: uid,
            nid: nid,
            comment: comment
        },
        success: function(response) {
            //console.log(response);
            // 清空输入框
            $(".comments_input").val('');
            if (response.status==200){
                Qmsg.success(response.message);
            }else{
                Qmsg.info(response.message);
            }
            // 评论成功后，动态插入评论块
            var lsAuthorHtml = '';
            if (nuid==uid){
                lsAuthorHtml = '<span class="note_authortag">作者</span>';
            }
            var newCommentHTML = `
            <div class="row comments_row comments_high">
                <div class="col-1">
                    <div class="comments_avatar"><img src="${avatar}"></div>
                </div>
                <div class="col right_comments">
                    <div class="comments_nickname">${nickname}${lsAuthorHtml}</div>
                    <div class="comments_text">${escapeHtml(comment)}</div>
                    <div class="comments_time">刚刚 ${iparea}</div>
                </div>
            </div>
        `;

            // 将评论块插入到指定的 div 之后
            var $newComment = $(newCommentHTML);
            $('.explore_comments_num').after($newComment);

            // 将滚动条移动到 .explore_height_fixed 顶部
            $('.explore_height_fixed').animate({ scrollTop: 0 }, 600);

            // .comments_high 样式 n 秒，加 .fade-out 类触发缓动
            setTimeout(function() {
                $newComment.addClass('fade-out');
            }, 2000);

            // 更新评论数量
            var commentsCountElement = $('#commentsCount');
            var currentText = commentsCountElement.text();

            if (currentText.includes('万')) {
                return;
            }

            var currentCount = parseInt(currentText, 10);

            currentCount += 1;
            commentsCountElement.text(formatNumberToWan(currentCount));


        },
        error: function(jqXHR, textStatus, errorThrown) {
            // 处理错误响应
            console.error("发送失败: " + textStatus, errorThrown);
            //Qmsg.error(textStatus, errorThrown);
        }
    });
});


function formatNumberToWan(num) {
    if (num < 10000) {
        return num;
    } else {
        return (num / 10000).toFixed(1) + '万';
    }
}

// 获取所有 exp_btn 的数字并进行转换
document.querySelectorAll('.exp_btn span').forEach(span => {
    const count = parseInt(span.textContent, 10); // 将文本内容转换为整数
    span.textContent = formatNumberToWan(count); // 更新文本为万字形式
});

//ajax get comments

let currentPage = 1; // 当前页码
let isLoading = false; // 加载状态
const $commentsContainer = $('.explore_height_fixed'); // 获取评论容器

// 监听评论容器的滚动事件
$commentsContainer.on('scroll', function() {
    // 获取容器的高度
    const containerHeight = $commentsContainer.height();
    // 获取内容的总高度
    const contentHeight = $commentsContainer[0].scrollHeight;
    // 获取当前滚动位置
    const scrollTop = $commentsContainer.scrollTop();

    // 当滚动位置加上容器高度接近内容高度时
    if (scrollTop + containerHeight >= contentHeight - 50 && !isLoading) {
        isLoading = true; // 设置为加载状态
        loadNoteComments(nid, ++currentPage); // 增加页码并加载评论
    }
});



loadNoteComments(nid,page = 1);

function loadNoteComments(note_id,page = 1) {
    $.ajax({
        type: 'POST', // 请求类型为 POST
        url: '/api/comments.php?type=getpl', // 替换为你的后端接口 URL
        data: {
            nid: note_id, // 传递笔记 ID
            page: page   // 传递页码
        },
        dataType: 'json', // 期望后端返回 JSON 数据
        success: function(response) {
            // 请求成功后的处理逻辑
            if (response) {
                //console.log(response);
                insertComments(response);
            } else {
                // 处理错误情况，比如没有更多评论等
                //Qmsg.warning('加载评论失败');
                //console.log(response)
                //alert(response.message || '加载评论失败');
            }
            isLoading = false; // 重置加载状态
        },
        error: function(error) {
            // 请求失败的处理逻辑
            //console.error('评论加载失败：', error);
            //Qmsg.error('无法加载评论，请稍后再试');
            //alert('无法加载评论，请稍后再试');
            isLoading = false; // 重置加载状态
        }
    });
}

// 将评论插入到指定位置
function insertComments(comments) {
    const $commentsContainer = $('.explore_comments_num');
    var AuthorHtml = '';
    var isaus = false;
        comments.forEach(comment => {
        isaus = comment.user_id==nuid;
        AuthorHtml = isaus ? '<span class="note_authortag">作者</span>' : '';
        const commentBlock = `
            <div class="row comments_row">
                <div class="col-1">
                    <div class="comments_avatar">
                        <img src="${comment.avatar || '/data/avatar/default.jpg'}" alt="Avatar">
                    </div>
                </div>
                <div class="col right_comments">
                    <div class="comments_nickname"><a class="comments_profileu" href="/profile.php?id=${comment.user_id}">${comment.nickname}</a>${AuthorHtml}</div>
                    <div class="comments_text">${comment.content}</div>
                    <div class="comments_time">${comment.formattime} ${comment.iparea ? ' ' + comment.iparea : ''}</div>
                </div>
            </div>
        `;

        // 将评论块插入到 .explore_comments_num 后面
        if ($('.comments_row').length > 0) {
            // 如果存在，插入到最后一个已有评论后面
            $('.comments_row:last').after(commentBlock);
        } else {
            // 如果不存在，直接插入到容器后面
            $commentsContainer.after(commentBlock);
        }
    });
}

// 绑定键盘事件到评论输入框
$(".comments_input").on("keydown", function(event) {
    // 检测是否按下回车键
    if (event.key === "Enter") {
        event.preventDefault(); // 防止表单提交或换行
        $(".sendBtn").click(); // 触发发送按钮的点击事件
    }
});

//文章渲染内链tags
var $expDiv = $('#exp_nr');
var athref = $expDiv.html();


var athrefhashtagRegex = /([@])([^\s]{1,20})\s/g;        ///#([^\s]{1,20})\s/g;


athref = athref.replace(athrefhashtagRegex, function(match, symbol, p1) {
    if (p1.length <= 20) {
        if (symbol === '@') {
            return `<a class="note_tags" href="/?so=${encodeURIComponent(p1)}&note_type=10">@${p1}</a> `;
        }
    }
    // 如果超过10个字符且没有空格，则不进行渲染
    return match;
});

// 更新文章内容
$expDiv.html(athref);




/*var $contentDiv = $('#output_tags');
var content = $contentDiv.html();

// 正则表达式匹配规则：以 # 开头，后面跟着最多10个字符（可包含汉字），直到遇到空格才算结束
// 如果超过10个字符且没有空格的，则不匹配
var hashtagRegex = /([#])([^\s]{1,20})\s/g;        ///#([^\s]{1,20})\s/g;

// 替换匹配到的 #xxx 关键字为带内链的 <a> 标签
content = content.replace(hashtagRegex, function(match, symbol, p1) {
    if (p1.length <= 20) {
        // 生成内链
        if (symbol === '#') {
            return `<a class="note_tags" href="/?so=${encodeURIComponent(p1)}">#${p1}</a> `;
        } else if (symbol === '@') {
            return `<a class="note_tags" href="/?so=${encodeURIComponent(p1)}&note_type=10">@${p1}</a> `;
        }
        //return `<a class="note_tags" href="/?so=${encodeURIComponent(p1)}">#${p1}</a> `;
    }
    // 如果超过10个字符且没有空格，则不进行渲染
    return match;
});

// 更新文章内容
$contentDiv.html(content);*/

//过滤
function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}


